<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./fonts/图标图标/iconfont.css">
    <link rel="stylesheet" href="./vendor/swiper/swiper-bundle.min.css">
</head>
<body style="background-color: #FFAA8C;">
    <!-- 头部 -->
    <header>
        <div class="top container">
            <ul class="top-left">
                <li>中国大陆 </li>
                <li class="on_off" >
                    <span class="off active">亲,<a href="./login.html">请登录</a></span>
                    <span class="on">ykx</span>

                </li>
                <li style="margin-left: 70px;" class="regi"><a href="./register.html">免费注册</a></li>
                <li>手机逛淘宝</li>
            </ul>
            <ul class="top-right">
                <li>我的淘宝</li>
                <li><span class="iconfont icon-gouwuche"></span><a href="./cart.html">购物车</a></li>
                <li><span class="iconfont icon-shoucang2" style="color:#ccc"></span>收藏夹</li>
                <li>商品分类</li>
                <li>免费开店</li>
                <li>千牛卖家中心</li>
                <li>联系客服</li>
                <li class="web-nav">
                    <span class="iconfont icon-gengduo-2"></span>网站导航<span class="iconfont icon-xiala" style="color:#ccc;"></span>
                    <div class="nav container">
                        <div>
                            <p>特色市场</p>
                            <ul>
                                <li>女装</li>
                                <li>手机</li>
                                <li>男装</li>
                                <li>鞋子</li>
                                <li>包宝宝</li>
                            </ul>
                            <ul>
                                <li>女装</li>
                                <li>手机</li>
                                <li>男装</li>
                                <li>鞋子</li>
                                
                            </ul>
                            <ul>
                                <li>女装</li>
                                <li>手机</li>
                                <li>男装</li>
                               
                            </ul>
                        </div>
                        <div>
                            <p style="color: pink;">主体市场</p>
                            <ul>
                                <li>女装</li>
                                <li>手机</li>
                                <li>男装</li>
                                <li>鞋子</li>
                                <li>包</li>
                            </ul>
                            <ul>
                                <li>女装</li>
                                <li>手机</li>
                                <li>男装</li>
                                <li>鞋子</li>
                                
                            </ul>
                            <ul>
                                <li>女装</li>
                                <li>手机</li>
                                <li>男装</li>
                               
                            </ul>
                        </div>
                        <div>
                            <p style="color: skyblue;">精彩推荐</p>
                            <ul>
                                <li>女装</li>
                                <li>手机</li>
                                <li>男装</li>
                                <li>鞋子</li>
                                <li>包</li>
                            </ul>
                            <ul>
                                <li>女装</li>
                                <li>手机</li>
                                <li>男装</li>
                                <li>鞋子</li>
                                
                            </ul>
                            <ul>
                                <li>女装</li>
                                <li>手机</li>
                                <li>男装</li>
                               
                            </ul>
                        </div>
                        <div>
                            <p style="color: purple;">阿里APP</p>
                            <ul>
                                <li>女装</li>
                                <li>手机</li>
                                <li>男装</li>
                                <li>鞋子</li>
                                <li>包</li>
                                <li>女装</li>
                                <li>手机</li>
                                <li>男装</li>
                            </ul>
                            <ul>
                                <li>女装</li>
                                <li>手机</li>
                                <li>男装</li>
                                <li>鞋子</li>
                                
                            </ul>
                            <ul>
                                <li>女装</li>
                                <li>手机</li>
                                <li>男装</li>
                               
                            </ul>
                        </div>
                        
                    </div>
                </li>
            </ul>
        </div>
    </header>
    <!-- 商品简单分类 -->
    <div class="simple_sort container">
        <p><img src="./img/tmall.png" alt=""></p>
        <div class="d1">
            <div class="left">
                <h4>服饰风尚</h4>
                <p>不止3折</p>
            </div>
            <div class="right">
               <img src="./img/O1衣着_.webp" alt="">
            </div>
        </div>
        <div class="d2">
            <div class="left">
                <h4>母婴亲子</h4>
                <p>抢五折神券</p>
            </div>
            <div class="right">
               <img src="./img/O1衣着_.webp" alt="">
            </div>
        </div>
        <div class="d3">
            <div class="left">
                <h4>智能家电</h4>
                <p>抢24期免息</p>
            </div>
            <div class="right">
               <img src="./img/O1衣着_.webp" alt="">
            </div>
        </div>
        <div class="d4">
            <div class="left">
                <h4>全球尖货</h4>
                <p>抢100元券</p>
            </div>
            <div class="right">
               <img src="./img/O1衣着_.webp" alt="">
            </div>
        </div>
        <div class="d5">
            <div class="left">
                <h4>家具建材</h4>
                <p>满200减30</p>
            </div>
            <div class="right">
               <img src="./img/O1衣着_.webp" alt="">
            </div>
        </div>

    </div>
    <!-- 主体 -->
    <div class="content container clear">
        <div class="cone">
            <div class="gif"><img src="../src/img/tb.gif" alt=""></div>
            <div class="search">
                <div class="search_top">
                    <div class="filt">宝贝</div>
                    <input class="sar" type="text" placeholder="连衣裙女夏气质"> 
                    <button>搜索</button>
                    <ul></ul>
                </div>
                <ul class="search_keyword">
                    <li>新款连衣裙</li>
                    <li>四件套</li>
                    <li>潮流T恤</li>
                    <li>时尚女鞋</li>
                    <li>短裤</li>
                    <li>半身裙</li>
                    <li>男士外套</li>
                    <li>墙纸</li>
                    <li>行车记录仪</li>
                    <li>新款男鞋</li>
                    <li>耳机</li>
                    <li>时尚女包</li>
                    <li>沙发</li>
                </ul>
            </div>
        </div>
        <!-- 商品分类以及轮播图区域 -->
        <div class="sortBanner">
            <ul class="sort">
                <li>
                    女装 / 内衣 / 家居
                    <span>></span>
                    <div class="resort"></div>
                </li>
                <li>女鞋 / 男鞋 / 箱包<span>></span><div class="resort"></div></li>
                <li>母婴 / 童鞋 / 玩具<span>></span><div class="resort"></div></li>
                <li>房产 / 装修家具 / 建材<span>></span><div class="resort"></div></li>
                <li>男装 / 运动户外<span>></span><div class="resort"></div></li>
                <li>美妆 / 彩妆 / 个护<span>></span><div class="resort"></div></li>
                <li>手机 / 数码 / 企业<span>></span><div class="resort"></div></li>
                <li>大家电 / 生活电器 <span>></span><div class="resort"></div></li>
                <li>零食 / 生鲜 / 茶酒<span>></span><div class="resort"></div></li>
                <li>厨具 / 收纳 / 清洁<span>></span><div class="resort"></div></li>
                <li>家纺 / 家饰 / 鲜花<span>></span><div class="resort"></div></li>
                <li>图书音像 / 文具 <span>></span><div class="resort"></div></li>
                <li>医药保健 / 进口<span>></span><div class="resort"></div></li>
                <li>汽车 / 二手车 / 用品<span>></span><div class="resort"></div></li>
                <li>手表 / 眼镜 / 珠宝饰品<span>></span><div class="resort"></div></li>
            </ul>
            <div class="ban">
                <div class="top">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide"><img src="./img/banner1.jpg" alt=""></div>
                            <div class="swiper-slide"><img src="./img/banner2.jpg" alt=""></div>
                            <div class="swiper-slide"><img src="./img/banner3.jpg" alt=""></div>
                            <div class="swiper-slide"><img src="./img/banner4.jpg" alt=""></div>
                            <div class="swiper-slide"><img src="./img/banner5.jpg" alt=""></div>
                        </div>
                        <!-- 如果需要分页器 -->
                        <div class="swiper-pagination"></div>
                        
                        <!-- 如果需要导航按钮 -->
                        <div class="swiper-button-prev"></div>
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-next swiper-button-white"></div> <!-- 白色 -->
                        <div class="swiper-button-prev swiper-button-white"></div> <!-- 白色 -->

                        
                        <!-- 如果需要滚动条 -->
                        <div class="swiper-scrollbar"></div>
                    </div>
                    <p><img src="../src/img/618.webp" alt=""></p>
                </div>
                <p class="txt">理想生活上天猫<span>2/5</span></p>
                <div class="bottom">
                    <p><img src="../src/img/kouhong.jpg" alt=""></p>
                    <p><img src="../src/img/chi.jpg" alt=""></p>
                    <p><img src="../src/img/fashion.jpg" alt=""></p>
                </div>
            </div>
            <div class="info">
                <div class="head_img">
                    <p class="p1"><img src="../src/img/head.jpg" alt=""></p>
                    <p class="p2">hi,<span>您好呀！</span></p>
                </div>
                <div class="login">
                    <button class="log">登录</button>
                    <button class="reg">注册</button>
                    <button>开店</button>

                </div>
                <div class="pic"><img src="../src/img/life.jpg" alt=""></div>
            </div>
        </div>
        <!-- 图片区域 -->
        <ul class="photos">
            <li><img src="./img/deco1.png" alt=""></li>
            <li><img src="./img/deco2.png" alt=""></li>
            <li><img src="./img/deco3.png" alt=""></li>
            <li><img src="./img/deco4.png" alt=""></li>
            <li><img src="./img/deco5.png" alt=""></li>
        </ul>
        <div class="quality_goods">
            <div class="wenzi">
                <h2>有好货</h2>
                <p><img src="./img/kbei.png" alt=""></p>
            </div>
            <div class="goods">
                <div>
                    <p class="pic"><img src="./img/z1.webp" alt=""></p>
                    <p class="txt">士大夫撒法发撒发撒发撒法发撒发发发发是发发发发撒法发撒法发</p>
                </div>
                <div>
                    <p class="pic"><img src="./img/z2.webp" alt=""></p>
                    <p class="txt">士大夫撒法发撒发撒发撒法发萨芬发生法发</p>
                </div>
                <div>
                    <p class="pic"><img src="./img/z3.webp" alt=""></p>
                    <p class="txt">士大夫撒法发撒发撒发撒法发萨芬发生法发</p>
                </div>
                <div>
                    <p class="pic"><img src="./img/z4.webp" alt=""></p>
                    <p class="txt">士大夫撒法发撒发撒发撒法发萨芬发生法发</p>
                </div>
                <div>
                    <p class="pic"><img src="./img/z5.webp" alt=""></p>
                    <p class="txt">士大夫撒法发撒发撒发撒法发萨芬发生法发</p>
                </div>
            </div>
        </div>
        <ul class="xinpin">
            <li><img src="./img/u1.jpg" alt=""></li>
            <li><img src="./img/u2.jpg" alt=""></li>
            <li><img src="./img/u3.jpg" alt=""></li>
        </ul>
        <!-- 猜你喜欢 -->
        <div class="love">
            <div class="wenzi">
                <h2>猜你喜欢</h2>
                <p><img src="./img/tuijian.png" alt=""></p>
            </div>
            <div class="goods_list">
                <div class="goods">
                    <!-- <div>
                        <p class="pic"><img src="./img/goods.webp" alt=""></p>
                        <p class="txt">
                            夏季2021短袖t恤男潮牌ins潮流港风超火cec宽松圆领半袖体恤衫
                        </p>
                        <div class="jiage">
                            <p class="price">￥49</p>
                            <p class="purse">200+人购买</p>
                        </div>
                        <div class="mask">
                            <button>查找相似</button>
                        </div>
                    </div>
                    <div>
                        <p class="pic"><img src="./img/goods.webp" alt=""></p>
                        <p class="txt">
                            夏季2021短袖t恤男潮牌ins潮流港风超火cec宽松圆领半袖体恤衫
                        </p>
                        <div class="jiage">
                            <p class="price">￥49</p>
                            <p class="purse">200+人购买</p>
                        </div>
                    </div>
                    <div>
                        <p class="pic"><img src="./img/goods.webp" alt=""></p>
                        <p class="txt">
                            夏季2021短袖t恤男潮牌ins潮流港风超火cec宽松圆领半袖体恤衫
                        </p>
                        <div class="jiage">
                            <p class="price">￥49</p>
                            <p class="purse">200+人购买</p>
                        </div>
                    </div>
                    <div>
                        <p class="pic"><img src="./img/goods.webp" alt=""></p>
                        <p class="txt">
                            夏季2021短袖t恤男潮牌ins潮流港风超火cec宽松圆领半袖体恤衫
                        </p>
                        <div class="jiage">
                            <p class="price">￥49</p>
                            <p class="purse">200+人购买</p>
                        </div>
                    </div>
                    <div>
                        <p class="pic"><img src="./img/goods.webp" alt=""></p>
                        <p class="txt">
                            夏季2021短袖t恤男潮牌ins潮流港风超火cec宽松圆领半袖体恤衫
                        </p>
                        <div class="jiage">
                            <p class="price">￥49</p>
                            <p class="purse">200+人购买</p>
                        </div>
                    </div>
                </div>
                <div class="goods">
                    <div>
                        <p class="pic"><img src="./img/goods.webp" alt=""></p>
                        <p class="txt">
                            夏季2021短袖t恤男潮牌ins潮流港风超火cec宽松圆领半袖体恤衫
                        </p>
                        <div class="jiage">
                            <p class="price">￥49</p>
                            <p class="purse">200+人购买</p>
                        </div>
                    </div>
                    <div>
                        <p class="pic"><img src="./img/goods.webp" alt=""></p>
                        <p class="txt">
                            夏季2021短袖t恤男潮牌ins潮流港风超火cec宽松圆领半袖体恤衫
                        </p>
                        <div class="jiage">
                            <p class="price">￥49</p>
                            <p class="purse">200+人购买</p>
                        </div>
                    </div>
                    <div>
                        <p class="pic"><img src="./img/goods.webp" alt=""></p>
                        <p class="txt">
                            夏季2021短袖t恤男潮牌ins潮流港风超火cec宽松圆领半袖体恤衫
                        </p>
                        <div class="jiage">
                            <p class="price">￥49</p>
                            <p class="purse">200+人购买</p>
                        </div>
                    </div>
                    <div>
                        <p class="pic"><img src="./img/goods.webp" alt=""></p>
                        <p class="txt">
                            夏季2021短袖t恤男潮牌ins潮流港风超火cec宽松圆领半袖体恤衫
                        </p>
                        <div class="jiage">
                            <p class="price">￥49</p>
                            <p class="purse">200+人购买</p>
                        </div>
                    </div>
                    <div>
                        <p class="pic"><img src="./img/goods.webp" alt=""></p>
                        <p class="txt">
                            夏季2021短袖t恤男潮牌ins潮流港风超火cec宽松圆领半袖体恤衫
                        </p>
                        <div class="jiage">
                            <p class="price">￥49</p>
                            <p class="purse">200+人购买</p>
                        </div>
                    </div> -->
                </div> 
            </div>
        </div>
        <!-- 楼层导航ol -->
        <ol>
            <li>品质好货</li>
            <li>新品上市</li>
            <li>猜你喜欢</li>
        </ol>
        <!-- 返回顶部 -->
        <div class="rtop">
            返回顶部
        </div>
    </div>
    <script src="./js/polyfill.js"></script>
    <script src="../src/vendor/jquery/jquery.min.js"></script>
    <script src="./vendor/swiper/swiper-bundle.min.js"></script>
    <script src="./vendor/utils.js"></script>
    <script src="../src/js/shouye.js"></script>
</body>
</html>
